<template>
    <v-app>
        <v-container>
            <div
                id="myEcharts"
                :style="{ width: '500px', height: '300px' }"
            ></div>
            <v-btn color="success">测试消息提示</v-btn>
        </v-container>
    </v-app>
</template>
<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator';
import echarts from 'echarts';
import Snackbar from '@/components/snackbar/index'; // 鉴于框架潜在bug，导致的样式无法更新，暂废弃
import { login, logout, getUserInfo } from '@/api/user';

@Component({
    components: {},
})
export default class Dashboard extends Vue {
    private value: boolean = true;
    private async mounted() {
        // (Snackbar as any).error('err' || 'Has Error'); // 缺少定义文件，所以as any
        const { data } = await getUserInfo({
            /* Your params here */
        });
        if (!data) {
            throw Error('Verification failed, please Login again.');
        }
        const { roles, name, avatar, introduction, email } = data.user;
        console.log(data);

        this.$notify({
            type: 'warn',
            group: 'sinzk',
            title: '温馨提示',
            text: '我不是bug，是智能提示',
        });
        this.table();
        // Snackbar({
        //     type: 'info',
        //     text: 'ddd',
        //     color: 'red',
        //     timeout: 1500,
        // });
    }

    private table() {
        const myEcharts = echarts.init(document.getElementById(
            'myEcharts',
        ) as HTMLCanvasElement);

        myEcharts.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ['客户', '代理商', '机器', 'money', 'pretty', 'APP'],
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20],
                },
            ],
        });
    }
}
</script>